<template>
	<view class="ff-cell-group">
		<view class="ff-cell-group-title">
			<slot name="title">
				<view class="ff-cell-group-title-default">
					{{$ff.props.title}}
				</view>
			</slot>
		</view>
		<view class="ff-cell-group-container" :style="{
			'border-top': $ff.props.isBorder?'1px solid '+$ff.props.borderColor:'unset', 
			'border-bottom': $ff.props.isBorder?'1px solid '+$ff.props.borderColor:'unset', 
			'border-radius': $ff.props.borderRadius,
			'padding': $ff.props.padding,
			'background-color': $ff.props.bgColor}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ff-cell-group",
		components: {},
		props: {
			title: {
				type: String,
				default: undefined,
			},
			isBorder: {
				type: Boolean,
				default: undefined,
			},
			borderRadius: {
				type: String,
				default: undefined,
			},
			padding: {
				type: String,
				default: undefined,
			},
			bgColor: {
				type: String,
				default: undefined,
			},
			borderColor: {
				type: String,
				default: undefined,
			},
		},
		data() {
			return {

			};
		},
		mounted() {
			this.$set(this.$ff.config.props, 'ff-cell', {
				borderColor: this.$ff.props.borderColor,
			})
		},
		watch: {
			'props.borderColor'(newValue, oldValue) {
				this.$set(this.$ff.config.props['ff-cell'], 'borderColor', newValue)
			},
		},
		methods: {

		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";
	
	.ff-cell-group-title-default {
		padding: 10px 8px;
		font-size: 15px;
	}
</style>